<template>
    <div class="main">
        <!-- 头部区域 -->
        <div class="title">
            <div class="title-center">
                <div class="headList">
                    <router-link tag="button" to="/discovery/vip_zone"
                        ><span class="head-item active">会员专区</span>
                    </router-link>
                    <router-link tag="div" to="/discovery/video_courses"
                        ><span class="head-item">视频课</span>
                    </router-link>
                    <router-link tag="div" to="/discovery/live_courses"
                        ><span class="head-item">直播课</span>
                    </router-link>
                    <router-link tag="div" to="/discovery/major_courses"
                        ><span class="head-item">线下课</span>
                    </router-link>
                    <router-link tag="div" to="/discovery/zone_list"><span class="head-item">主题</span></router-link>
                </div>
            </div>
        </div>
        <!-- 组件区域 -->
        <div class="module">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
    name: "Discovery",
});
</script>

<script setup lang="ts"></script>

<style scoped lang="less">
.main {
    width: 100%;
    background-color: #f5f7f9;

    .title {
        margin-bottom: 10px;
        width: 100%;
        background: #fff;
        text-align: center;
        height: 80px;
        line-height: 80px;
        color: #111111;
        font-size: 16px;
        -ms-overflow-style: none;
        overflow: hidden;

        .title-center {
            width: 1200px;
            height: 114px;
            margin-left: auto;
            margin-right: auto;

            .headList {
                position: relative;
                display: inline-block;
                margin: 0 auto;
                width: 1000px;
                white-space: nowrap;
                overflow-x: auto;
                overflow-y: hidden;

                .head-item {
                    padding: 20px 4px;
                    margin: 0 20px;
                    text-align: center;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                }

                a {
                    text-decoration: none;
                    color: #000;
                }

                .router-link-active {
                    height: 70px;
                    display: inline-block;
                    text-decoration: none;
                    color: #000;
                    border-bottom: 3px solid #000;
                }
            }
        }
    }
}
</style>
